<template>
    <div>
        <home-header></home-header>
        <HomeSwiper :swiperList="swiperList"></HomeSwiper>
        <HomeIcons :iconList="iconList"></HomeIcons>
        <HomeRecommend :recommendList="recommendList"></HomeRecommend>
        <HomeWeekend :weekendList="weekendList"></HomeWeekend>
    </div>
</template>

<script>
import HomeHeader from './components/Header.vue'
import HomeSwiper from './components/Swiper.vue'
import HomeIcons from './components/Icons.vue'
import HomeRecommend from './components/Recommend.vue'
import HomeWeekend from './components/Weekend.vue'
import axios from 'axios'
import {mapState} from 'vuex'
    export default{
        components:{
            HomeHeader,
            HomeSwiper,
            HomeIcons,
            HomeRecommend,
            HomeWeekend
        },
        data(){
            return{
                swiperList:[],
                iconList:[],
                recommendList:[],
                weekendList:[],
                lastCity:""
            }
        },
        computed:{
            ...mapState(['city'])
        },
        methods:{
            getHomeInfo(){
                axios.get('/api/index.json?city='+this.city)
                .then(this.getHomeInfoSucc)
            },
            getHomeInfoSucc(res){
                res=res.data
                if(res.ret&&res.data){
                    this.swiperList=res.data.swiperList
                    this.iconList=res.data.iconList
                    this.recommendList=res.data.recommendList
                    this.weekendList=res.data.weekendList
                }
            }
        },
        mounted(){
            this.lastCity=this.city
            this.getHomeInfo()
        },
        activated(){            //当使用 keep-alive 时会有一个生命周期函数
            if(this.lastCity!==this.city){
                this.lastCity=this.city
                this.getHomeInfo()
            }
        }
    }
</script>

<style lang="stylus">

</style>